<!--
 * @Author: yinche 2814620694@qq.com
 * @Date: 2023-06-07 17:44:05
 * @LastEditors: yinche 2814620694@qq.com
 * @LastEditTime: 2023-06-11 22:51:34
 * @FilePath: \nodejsd:\新建 文件夹\qiemeng-app\src\views\Bmp.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <div class="head">
            <van-button @click="$router.go(-1)" type="primary">退出</van-button>
            <h3>当前播放的是第{{ index + 1 }}集</h3>
        </div>
        <video class="video" controls :src="videoList[index]"></video>
        <div class="btn">
            <button @click="last">上一集</button>
            ------
            <button @click="next">下一集</button>
        </div>
    </div>
</template>

<script setup>
/*
思路是通过服务器访问到视频文件
以数组的形式存放
通过数组[下标]来切换上下级
 */
import { reactive, ref } from 'vue';
let videoList = reactive([
    'http://yinche.work:7777/audio/zuihou/1.mp4',
    'http://yinche.work:7777/audio/zuihou/2.mp4',
    'http://yinche.work:7777/audio/zuihou/3.mp4',
    'http://yinche.work:7777/audio/zuihou/4.mp4',
    'http://yinche.work:7777/audio/zuihou/5.mp4',
    'http://yinche.work:7777/audio/zuihou/6.mp4',
    'http://yinche.work:7777/audio/zuihou/7.mp4',
    'http://yinche.work:7777/audio/zuihou/8.mp4',
    'http://yinche.work:7777/audio/zuihou/9.mp4',
    'http://yinche.work:7777/audio/zuihou/10.mp4',
    'http://yinche.work:7777/audio/zuihou/11.mp4',
    'http://yinche.work:7777/audio/zuihou/12.mp4',
    'http://yinche.work:7777/audio/zuihou/13.mp4',
]); // 视频数据 0- 12
let index = ref(0); //视频下标
//下一集
const next = () => {
    if (index.value < 12) {
        index.value++;
    } else if ((index.value = 12)) {
        index.value = 12;
        alert('已经是最后一集了');
    }
};
//上一集
const last = () => {
    if (index.value > 0) {
        index.value--;
    } else if (index.value == 0) {
        index.value = 0;
        alert('已经是第一集了');
    }
};
</script>

<style scoped>
.video {
    width: 100%;
    height: 300px;
}
</style>
